<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
     .box {
         width: 800px;
         height: 30px;
         margin: 100px auto;
         perspective: 500px;
     }
     .box ul {
         margin: 0 auto;
         
     }
     .box ul li {
         float: left;
         
         position: relative;
         list-style: none;
         margin-left: 5px;
         width: 100px;
         height: 30px;
         color: #fff;
         transition: all .3s;
         transform-style: preserve-3d;
     }
     .box ul li div {
         position: absolute;
         width: 100%;
         height: 30px;
         line-height: 30px;
         text-align: center;
         
     }
     .box ul li:hover {
         transform: rotateX(90deg);
     }
     .box ul li .one {
         background-color: black;
         transform: translateZ(15px);
     }
     .box ul li .two {
         background-color: red;
         transform:translatey(15px) rotateX(-90deg) ;
     }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="one">看下面</div>
                <div class="two">看上面</div>
            </li>
            <li><div class="one">看下面</div>
                <div class="two">看上面</div></li>
            <li><div class="one">看下面</div>
                <div class="two">看上面</div></li>
            <li><div class="one">看下面</div>
                <div class="two">看上面</div></li>
            <li><div class="one">看下面</div>
                <div class="two">看上面</div></li>
        </ul>
    </div>
</body>
</html>